<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>参考链接：https://mp.weixin.qq.com/s/qADnUx3G2tKyMT7iv6qFwg</title>
	</head>
	<link rel="stylesheet" type="text/css" href="../common.css" />
	<style type="text/css">
		.one {
			mask: linear-gradient(90deg, #fff, transparent);
			-webkit-mask: linear-gradient(90deg, #fff, transparent);
		}

		section {
			width: 400px;
		}

		.two {
			position: relative;
		}


		.two span {
			/* background: linear-gradient(90deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .9) 70%, rgba(255, 255, 255, .9)); */
			background: linear-gradient(90deg, transparent, transparent 70%, #fff);
			background-repeat: no-repeat;
			cursor: pointer;
			color: transparent;
			display: inline;
			line-height: 25px;
		}

		.two span::before {
			content: "苏苏就是小苏苏哇哈哈哈哈哈哈哈苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈哈哈哈好好好哈哈哈哈";
			position: absolute;
			top: 0;
			left: 0;
			color: #000;
			z-index: -1;
		}

		.three {
			width: 400px;
			line-height: 25px;
			/* 行高--对应 */
			-webkit-mask: linear-gradient(270deg, transparent, transparent 30%, #000), linear-gradient(270deg, #000, #000);
			mask: linear-gradient(270deg, transparent, transparent 30%, #000), linear-gradient(270deg, #000, #000);
			-webkit-mask-size: 100% 25px, 100% calc(100% - 25px);
			mask-size: 100% 25px, 100% calc(100% - 25px);
			-webkit-mask-position: bottom, top;
			mask-position: bottom, top;
			-webkit-mask-repeat: no-repeat;
			mask-repeat: no-repeat;
		}
	</style>
	<body>
		<section>
			<p class="one mb20">苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈</p>
			<p class="two mb20">
				<span>苏苏就是小苏苏哇哈哈哈哈哈哈哈苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈哈哈哈好好好哈哈哈哈</span>
			</p>
			<!-- mask实现 -->
			<p class="three mb20">苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈</p>
			<p class="three mb20">
				苏苏就是小苏苏哇哈哈哈哈哈哈哈苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈苏苏就是小苏苏哇哈哈哈哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈哈哈哈哈哈哈好好好哈哈哈哈哈哈哈好好好哈哈哈哈·11111哈哈哈哈哈哈好好好哈哈哈哈哈哈哈好好好哈哈哈哈哈哈哈好好好哈哈哈哈
			</p>
		</section>

	</body>
</html>
